<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="zh-cn" xmlns：th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客房编辑</title>
    <link href="admin/bower_components/bootstrap/dist/css/bootstrap.min.css" th:href="@{/admin/bower_components/bootstrap/dist/css/bootstrap.min.css}" rel="stylesheet">
    <link href="admin/plugins/bootstrap-fileinput/css/fileinput.min.css" th:href="@{/admin/plugins/bootstrap-fileinput/css/fileinput.min.css}" rel="stylesheet">
</head>
<body>
<form class="form-horizontal" action="${basePath }/admin/editRoom" th:action="@{/admin/editRoom}"
      method="post" style="width: 1200px; margin-top: 20px">

    <input name="id" type="text" th:value="${room!=null?room.id:''}" style="display: none">

    <div class="form-group">
        <label for="InputName" class="col-sm-2 control-label">房间类型</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" th:value="${room!=null?room.type:'' }"
                   id="InputName" name="type" placeholder="房间类型">
        </div>
    </div>

    <div class="form-group">
        <label for="InputUrl" class="col-sm-2 control-label">房间面积</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" th:value="${room!=null?room.area:'' }"
                   id="InputUrl" name="area" placeholder="房间面积">
        </div>
    </div>
    <div class="form-group">
        <label for="inputTarget" class="col-sm-2 control-label">床型</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" th:value="${room!=null?room.bed:'' }"
                   id="inputTarget" name="bed" placeholder="床型">
        </div>
    </div>
    <div class="form-group">
        <label for="inputStatus" class="col-sm-2 control-label">窗户</label>
        <div class="col-sm-10">
            <select name="havewindows" class="form-control">
                <option th:value="有窗">有窗</option>
                <option th:value="无窗">无窗</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputStatus" class="col-sm-2 control-label">加床</label>
        <div class="col-sm-10">
            <select name="addbed" class="form-control">
                <option th:value="不可加床">不可加床</option>
                <option th:value="可加床">可加床</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputStatus" class="col-sm-2 control-label">早餐</label>
        <div class="col-sm-10">
            <select name="havebreakfast" class="form-control">
                <option th:value="无早">无早</option>
                <option th:value="含早">含早</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputStatus" class="col-sm-2 control-label">可住人数</label>
        <div class="col-sm-10">
            <select name="pcount" class="form-control">
                <option th:value="1">1</option>
                <option th:value="2">2</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputTarget" class="col-sm-2 control-label">便利设施</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" th:value="${room!=null?room.convenience:'' }"
                   name="convenience" placeholder="便利设施">
        </div>
    </div>
    <div class="form-group">
        <label for="inputTarget" class="col-sm-2 control-label">媒体设备</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" th:value="${room!=null?room.media:'' }"
                   name="media" placeholder="媒体设备">
        </div>
    </div>
    <div class="form-group">
        <label for="inputTarget" class="col-sm-2 control-label">浴室</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" th:value="${room!=null?room.bath:'' }"
                   name="bath" placeholder="浴室">
        </div>
    </div>
    <div class="form-group">
        <label for="inputTarget" class="col-sm-2 control-label">价格</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" th:value="${room!=null?room.price:'' }"
                   name="price" placeholder="价格">
        </div>
    </div>
    <div class="form-group">
        <label for="inputImageUrl" class="col-sm-2 control-label">客房图片地址</label>
        <div class="col-sm-10 ">
            <input type="text" class="form-control" id="inputImageUrl"
                   name="image" placeholder="客房图片地址,不上传默认无图片"
                   th:value="${room!=null?room.image:''}" readonly="readonly">
        </div>

    </div>

    <div class="form-group">
        <label for="inputCateType" class="col-sm-2 control-label">上传图片</label>
        <div class="col-sm-10">
            <input  id="input-id" type="file"
                    class="file file-loading">
        </div>
    </div>

    <div class="form-group">
        <label for="inputStatus" class="col-sm-2 control-label">状态</label>
        <div class="col-sm-10">
            <select name="status" class="form-control">
                <option th:value="1">启用</option>
                <option th:value="0">禁用</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>
<!-- jQuery 3 -->
<!-- jQuery 3 -->
<script
        th:src="@{/admin/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- piexif  -->
<script
        th:src="@{/admin/plugins/bootstrap-fileinput/js/plugins/piexif.min.js}"></script>

<!-- purify  -->
<script
        th:src="@{/admin/plugins/bootstrap-fileinput/js/plugins/purify.min.js}"></script>

<!-- fileinput  -->
<script
        th:src="@{/admin/plugins/bootstrap-fileinput/js/fileinput.min.js}"></script>

<!-- Bootstrap 3.3.7 -->
<script
        th:src="@{/admin/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>

<!-- fileinput  -->
<script
        th:src="@{/admin/plugins/bootstrap-fileinput/js/locales/zh.js}"></script>
<script type="text/javascript">
    var obj=$("#input-id");
    var option={}
    option.uploadUrl="/file/uploadimageone";
    option.uploadAsync=true;
    option.language="zh";
    option.showCaption=true;
    option.showUpload=true;
    option.showRemove=true;
    option.showPreview=true;
    option.resizeImage=true;
    option.resizePreference='width';
    option.browseClass="btn btn-primary";
    option.uploadLabel="上传";
    option.enctype="multipart/form-data";
    option.dropZoneEnabled= false;
    option.allowedFileExtensions=[ "png", "jpg", "gif" ];
    option.maxFileCount=5;
    $("#inputWidth").blur(function() {

        width= $("#inputWidth").val();
        obj.fileinput('refresh', {maxImageWidth: width})

        if (isEmpty(width)) {
            return;
        }
    })
    $("#inputHeight").blur(function() {
        height= $("#inputHeight").val();

        obj.fileinput('refresh', {maxImageHeight: height})
        if (isEmpty(height)) {
            return;
        }
    })

    $(":radio").click(function(e) {
        if (e.target.defaultValue == 200) {


            obj.fileinput('refresh', {maxImageHeight: 200,maxImageWidth: 200})


            $("#inputWidth").val(200)
            $("#inputHeight").val(200)

        }
        if (e.target.defaultValue == 700) {

            obj.fileinput('refresh', {maxImageHeight: 450,maxImageWidth: 700})
            $("#inputWidth").val(700)
            $("#inputHeight").val(450)

        }
    });

    //with plugin options


    obj.fileinput(option/* {
			uploadUrl : "/file/uploadimageone",//上传的地址
			uploadAsync : true, //异步上传
			language : "zh", //设置语言
			showCaption : true, //是否显示标题
			showUpload : false, //是否显示上传按钮
			showRemove : true, //是否显示移除按钮
			showPreview : true, //是否显示预览按钮
			resizeImage : true, //调整图片的宽度
			maxImageWidth : 200,
			maxImageHeight : 200,
			resizePreference : 'width',
			browseClass : "btn btn-primary", //按钮样式
			uploadLabel : "上传", //设置上传按钮的汉字
			enctype : 'multipart/form-data',
			dropZoneEnabled : false, //是否显示拖拽区域
			allowedFileExtensions : [ "png", "jpg", "gif" ], //接收的文件后缀
			maxFileCount : 5

		} */).on("fileuploaded", function(event, data) {
        var response = data.response;
        if (response.uploaded == 1) {

            $("#inputImageUrl").val(response.url)

        } else {
            alert("文件上传失败")
        }

        console.log(response);

    }).on('fileerror', function(event, data, msg) { //一个文件上传失败
        alert('文件上传失败！' + msg);


    }).on("filebatchselected", function(event, files) {
        console.log(files)
    }).on('fileselect', function(event, numFiles, label) {


    });;

    function isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
            return true;
        } else {
            return false;
        }
    }

</script>
</body>
</html>